<template>
    <div class="DylLink">
        <el-card class="DylLink-card">
            <el-form :model="form" label-width="300px">
                <el-form-item label="抖音主推的作品链接：">
                    <el-input class="storeName-input" v-model="form.storeName" maxlength="5" placeholder="请输入抖音主推的作品链接" />
                </el-form-item>
                <el-form-item class="opera-form-item">
                    <el-button type="primary"  @click="SaveConfig">保 存</el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </div>
</template>
    
<script setup>
import { ref,reactive, onMounted } from 'vue';
import { GetHomeConfig,SetHomeConfig } from '../utils/api/index.js';
const form = reactive({
    dylLink: '',
});
const saveFlag = ref(false);
const GetConfig = () => {
    GetHomeConfig({}).then((res) => {
        if(res.code == 200) {
            form.dylLink = res.data.title;
        }
    })
};
const SaveConfig = () => {
    if(saveFlag.value) return;
    saveFlag.value = true;

    SetHomeConfig({
        title: form.dylLink,
    }).then(res => {
        saveFlag.value = false;
        if(res.code == 200){
            GetConfig();
            // eslint-disable-next-line no-undef
            ElMessage({
                showClose: true,
                message: '保存成功',
                type: 'success',
            })
        };
    })
};
onMounted(() => {
    GetConfig()
})
</script>
    
<style scoped lang="scss">
.DylLink{
    width: 100%;
    height: 100%;
    &-card{
        width: 100%;
        height: 100%;
        :deep .el-card__body{
            height: 100%;
            overflow-y: scroll;
            .el-form{
                margin: 20px;
                .el-form-item{
                    .el-form-item__label{
                        font-weight: 600;
                    }
                    .storeName-input{
                        width: 500px;
                    }
                }
            }
           
        }
    }
}
</style>